<ion-header>
    <ion-toolbar>
        <ion-button (click)="goBack()">返回</ion-button>
        <ion-title style="text-align: center;">
            账户余额查询
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding style="background-color: #f2f2f2;">
    <!--查询条件-->
    <ion-list style="background-color: #fff;">
        <div class="item-det" (click)="showAcctInfoAlert('selectAcct')">
            <p><span>付款账户：</span><span>{{selectedAcctNo}}</span></p>
            <ion-img src="assets/imgs/icon_jyjl_arrow_d@2x.png"></ion-img>
        </div>
        <div class="item-det" (click)="showAcctInfoAlert('acctName')">
            <p><span>别&#x3000;&#x3000;名：</span> <span style="color: black; font-weight: 500">{{selectedAcctName}}</span></p>
        </div>
        <div class="item-det" (click)="showAcctInfoAlert('currency')">
            <p><span style="letter-spacing: 1.3px">人&nbsp;民&nbsp;币：</span> <span>人民币</span></p>
        </div>
        <div class="item-det"><span>选择时间：</span>
            <div class="time-sel clearfix">
                <div class="time-star">
                    <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="queryDate.startTime" cancelText="取消" doneText="确定"  placeholder="开始时间"></ion-datetime>
                </div>
                <span class="txt">至</span>
                <div class="time-end">
                    <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="queryDate.endTime" cancelText="取消" doneText="确定" placeholder="结束时间"></ion-datetime>
                </div>
            </div>
        </div>
    </ion-list>
    <ion-button expand="block" fill="outline" (click)="queryDataEvent()">查&nbsp;&nbsp;&nbsp;&nbsp;询</ion-button>
    <div class="cl-segment-line"></div>


    <!--查询结果-卡信息-->
    <ion-card class="cl-card-layout">
        <ion-card-content no-padding>
            <div class="cl-card-header">
                <img src="assets/imgs/bank_default.png" style="border-radius: .2rem;">
                <span >{{acctName}}</span>
                <span >借记卡I类</span>
            </div>
            <p>{{acctNo}}</p>
        </ion-card-content>
    </ion-card>
    <!--查询结果列表-->
    <div class="main_content">
        <ul>
            <div *ngIf="true">
                <!--<div *ngFor="let list of queryResultData; let i = index" style="margin-bottom: 1rem">-->
                <li style="background-color: #fff;">
                    <div class="coupon-txt">
                        <div class="cl-info">
                            <p class="coupon_name">账户：</p>
                            <p class="coupon_time">{{acctNo}}</p>
                            <p class="coupon_name">账户名称：</p>
                            <p class="coupon_time">{{acctName}}</p>
                            <p class="coupon_name">开户行：</p>
                            <p class="coupon_time">{{openBank}}</p>
                            <p class="coupon_name">当前余额：</p>
                            <p class="coupon_time">{{balance}}</p>
                            <p class="coupon_name">冻结金额：</p>
                            <p class="coupon_time">{{frozenBalance}}</p>
                            <p class="coupon_name">可用余额：</p>
                            <p class="coupon_time">{{useBalance}}</p>
                            <p style="clear: both"></p>
                        </div>
                        <p (click)="showInfo(acctNo)" class="coupon_info">详细信息
                            <img src="{{acctNo != nowClick ? 'assets/imgs/icon_yhq_detail_d@2x.png' : 'assets/imgs/icon_yhq_detail_up@2x.png'}}"
                                 alt="">
                        </p>
                    </div>
                </li>
                <div *ngIf="acctNo == nowClick" class="hide_info">
                    暂无详细信息
                </div>
            </div>
            <!--</div>-->
        </ul>
    </div>

    <ion-button expand="block" (click)="reloadAcctData()">初始化账户数据</ion-button>

</ion-content>

<!--账户数据列表-->
<div class="alert" *ngIf="showAcctAlert">
    <div class="alert-close" (click)="hideAcctInfoAlert()"></div>
    <div class="alert-main fadeInUp animated-300">
        <div class="alert-list">
            <div *ngFor="let a of accountsListArr">
                <p (click)="selectAccount(a.acctno, a.acctname, a.openbank)">{{formatCardNum(a.acctno)}}&nbsp;&nbsp;{{a.acctname}}</p>
                <ion-img src="assets/imgs/icon_choosed.png" *ngIf="formatCardNum(a.acctno) === selectedAcctNo"></ion-img>
            </div>
        </div>
        <div class="alert-cancel" (click)="hideAcctInfoAlert()">取消</div>
    </div>
</div>
